<template>
  <div>
    <el-row>
      <el-col :span="6" v-for="item in dataCards" v-bind:key="item.title">
        <data-card :bg-color="item.bgColor" :target="item.target" :contrast="item.contrast" :title="item.title"
                   :sub-title="item.subTitle"/>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="6">
        <pie-chart :data="memberRote" title="会员占比"/>
      </el-col>
      <el-col :span="12">
        <line-chart title="日收益统计" :data="incomeLines"/>
      </el-col>
      <el-col :span="6">
        <doughnut-chart :data="fileCategories" title="文件分布情况"/>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="18">
        <top-share-table :data="topShare"/>
      </el-col>
      <el-col :span="6">
        <notice-time :data="noticeList"/>
      </el-col>
    </el-row>

  </div>
</template>

<script setup>


import {onMounted, reactive, ref} from "vue";
import {
  getDataCard,
  getFileCategories,
  getIncomeLine,
  getNoticeList,
  getNumberRote,
  getTopShare
} from "@/api/dashboard";
import DataCard from "@/components/dashboard/data-card.vue";
import NoticeTime from "@/components/dashboard/notice-time.vue";
import PieChart from "@/components/dashboard/pie-chart.vue";
import DoughnutChart from "@/components/dashboard/doughnut-chart.vue";
import LineChart from "@/components/dashboard/line-chart.vue";
import TopShareTable from "@/components/dashboard/top-share-table.vue";

const dataCards = ref([])
const memberRote = ref([])
const fileCategories = ref([])
const incomeLines = reactive({
  x: [],
  y: []
})

const topShare = ref([])
const noticeList = ref([])

onMounted(() => {
  getDataCard().then(res => {
    dataCards.value = res.data.data
  })
  getNumberRote().then(res => {
    memberRote.value = [
      {
        value: res.data.data.number,
        name: '会员'
      }, {
        value: res.data.data.total - res.data.data.number,
        name: '非会员'
      }
    ]
  })

  getFileCategories().then(res => {
    fileCategories.value = [
      {value: res.data.data.video, name: '视频'},
      {value: res.data.data.text, name: '文体'},
      {value: res.data.data.picture, name: '图片'},
      {value: res.data.data.packet, name: '压缩包'},
      {value: res.data.data.music, name: '音频'},
      {value: res.data.data.other, name: '其它'}
    ]
    console.log(fileCategories.value);
  })
  getIncomeLine().then(res => {
    res.data.data.forEach(item => {
      incomeLines.x.push(item.date)
      incomeLines.y.push(item.income)
    })
    console.log(incomeLines);
  })
  getTopShare().then(res => {
    topShare.value = res.data.data
  })

  getNoticeList().then(res => {
    noticeList.value = res.data.data
  })
})


</script>

<style lang="scss" scoped>

</style>